<template>

  <!-- <Panel style="padding: 20px;margin-bottom: 20px;min-height: 450px;"> -->
  <div style="display: flex;flex-direction: column;background-color:aliceblue ;padding: 30px; align-items: center;">

    <div style="font-size: 14px;">订单有效期为30分钟，请及时付款</div>
    <div style="font-size: 16px;">{{order.msg}}</div>
    <div style="font-size: 16px;margin-top: 30px;">扫一扫付款（元）</div>
    <div style="font-size: 30px;color:orangered;font-weight: 800;">{{order.price}}</div>
    <div id="qrcode" ref="qrcode1"></div>
    <div style="font-size: 16px;margin-top: 30px;">请使用微信扫一扫完成支付</div>
  </div>
  <!-- </Panel> -->
</template>


<script>
  import api from '@oj/api'
  import { mapGetters } from 'vuex'
  import QRCode from 'qrcodejs2'
  // import utils from '@/utils/utils'
  import { USER_TYPE } from '@/utils/constants'

  export default {
    name: 'Wxpay',
    components: {
      QRCode
    },
    data () {
      return {
        order: {},
        url: '111',
        timer: '',
        timer2: ''
      }
    },
    mounted () {
      this.init()
      this.timer = setInterval(this.checkorder, 3000)
      this.timer2 = setTimeout(this.closeorder, 1800000)
    },
    beforeDestroy () {
      clearInterval(this.timer)
      clearInterval(this.timer2)
    },
    methods: {
      closeorder () {
        clearInterval(this.timer)
      },
      checkorder () {
        api['checkWxpayOrder'](this.order.order_number).then((res) => {
          if (res.data.data.ok) {
            clearInterval(this.timer)
            this.$message.success('支付成功')
            this.$router.push({name: 'payfinish', query: {out_trade_no: this.order.order_number, method: 'wx'}})
          }
        })
      },
      init () {
        var url = this.$route.query.url
        console.log('number...', url)
        let qrcode = new QRCode('qrcode', {
          width: 150,
          height: 150,
          colorDark: '#000000',
          colorLight: '#ffffff',
          typeNumber: 4,
          correctLevel: QRCode.CorrectLevel.H
        })
        qrcode.clear()
        qrcode.makeCode(url)
        let query = {}
        query.order_number = this.$route.query.order_number
        api['getOrderList'](query).then((res) => {
          this.order = res.data.data
          console.log(this.order)
        }).catch()
      }
    },
    computed: {
      ...mapGetters(['user', 'theme']),
      isAdmin () {
        return this.user.admin_type === USER_TYPE.SUPER_ADMIN
      }
    }
  }
</script>



<style lang="less" scoped>
 .course_item {
    width: 270px;
    float: left;
    background: #fff;
    margin-bottom: 24px;
    border-radius: 8px;
    cursor: pointer;
    border: 1px solid #d7d7d7;
    position: relative;
    margin-right: 5px;
  }

  .course_image {
    height: 180px;
    width: 100%;
  }

  .course_title {
    font-weight: 600;
    font-size: 20px;
  }
  
  .course_button {
    float: right;
    padding: 8px; 
    background-color:rgb(91, 177, 113);
    color: white;
  }

  
</style>
